<template>
	<div id="AddBlog">
		<BlogHeader></BlogHeader>
		<div class="container mt-3">
		<div class="card text-white bg-primary " >
  <div class="card-header">添加博客</div>
  <div class="card-body">
    <form v-if="!submmited">
    			<div class="form-group row">
    				<label for="" class="col-sm-2 col-form-label">博客标题：</label>
    				<div class="col-sm-10">
    					<input type="text" class="form-control" v-model="gr_blog.title" required>
    				</div>
    			</div>
    			<div class="form-group row">
    				<label for="" class="col-sm-2 col-form-label">博客内容：</label>
    
    				<div class="col-sm-10">
    					<textarea class="form-control" rows="3" v-model="gr_blog.content"></textarea>
    				</div>
    			</div>
    			<div class="form-group row">
    				<label for="" class="col-sm-2 col-form-label">文章分类：</label>
    				<div id="checkbosxes" class="col-sm-10 col-form-label">
    					<div class="form-check form-check-inline">
    						<input class="form-check-input" type="checkbox" value="vue.js" v-model="gr_blog.categories">
    						<label class="form-check-label" for="inlineCheckbox1"> Vue.js </label>
    					</div>
    					<div class="form-check form-check-inline">
    						<input class="form-check-input" type="checkbox" value="node.js" v-model="gr_blog.categories">
    						<label class="form-check-label" for="inlineCheckbox1"> node.js </label>
    					</div>
    					<div class="form-check form-check-inline">
    						<input class="form-check-input" type="checkbox" value="React.js" v-model="gr_blog.categories">
    						<label class="form-check-label" for="inlineCheckbox1"> React.js </label>
    					</div>
    					<div class="form-check form-check-inline">
    						<input class="form-check-input" type="checkbox" value="Angular.js" v-model="gr_blog.categories">
    						<label class="form-check-label" for="inlineCheckbox1"> Angular.js </label>
    					</div>
    				</div>
    			</div>
    			<hr>
    			<div class="form-group row">
    				<label for="" class="col-sm-2 col-form-label">作 者：</label>
    
    				<div class="col-sm-10">
    					<select v-model="gr_blog.author" class="custom-select">
    						<option v-for="author in authors">{{author}}</option>
    					</select>
    				</div>
    			</div>
    			<button @click.prevent="post" type="button" class="btn btn-success btn-lg btn-block"> 添加博客 </button>
    		</form>
    		<div v-if="submmited">
    			<h3>您的博客发布成功！</h3>
    		</div>	
  </div>
</div>
		<hr>
		
		<div id="preview"  class="jumbotron">
			<h3 >博客总览</h3>
			<hr class="my-3">
			<p class="lead">博客标题：{{gr_blog.title}}</p>
			<p class="lead">博客内容：</p>
			<p>{{gr_blog.content}}</p>
			
			<ul class="list-inline">
				<li class="list-inline-item" >博客分类：</li>
				<li class="list-inline-item text-primary" v-for="category in gr_blog.categories">{{category}}</li>
			</ul>
			<p class="text-danger">作者：{{gr_blog.author}}</p>
		</div>
	</div>
	</div>
</template>

<script>
	import BlogHeader from '@/components/BlogHeader'
	export default {
		name: 'AddBlog',
		components:{
			BlogHeader,
		},
		data() {
			return {
				gr_blog: {
					title: "",
					content: "",
					categories: [],
					author: ""
				},
				authors: ["张三李四", "米修在线", "studyvue", "huge", ],
				submmited: false
			}
		},
		methods: {
			post: function () {
				this.$http.post("http://jsonplaceholder.typicode.com/posts", {
						title: this.gr_blog.title,
						body: this.gr_blog.content,
						userId: 1
					})
					.then(function (Returned_data) {
						console.log(Returned_data);
						this.submmited = true;
					})
			}
		},

	}
</script>

<style>

</style>
